<!--
* @description 我卖了的
* @fileName sellList.vue
* @author huangyu
* @date 2023/02/16 14:18:18
!-->
<!--
* @description 订单列表
* @fileName order.vue
* @author huangyu
* @date 2023/02/11 15:56:27
!-->
<template>
   <div>
      <el-form :inline="true" style="padding:0 20px;">
         <el-form-item>
            <el-input v-model="goodsName" placeholder="请输入物品名称"></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
         </el-form-item>
      </el-form>

      <el-table :data="list" highlight-current-row border>
         <el-table-column type="index" width="50" label="序号"></el-table-column>
         <el-table-column label="物品图标" width="80">
               <template slot-scope="scope">
                  <div style="height:36px;position: relative;">
                     <img :src="`https://7765-web-cloud0713-6g519i65f479e638-1301064135.tcb.qcloud.la/GamePublic/${scope.row.goodsModel.icon}`" alt="">
                     <div class="zx-icon-bg"></div>
                  </div>
               </template>
            </el-table-column>
         <el-table-column label="物品名称" prop="goodsName">
            <template slot-scope="scope">
               {{scope.row.goodsModel.name}}
            </template>
         </el-table-column>
            <el-table-column label="物品等级" prop="level" width="100">
                <template slot-scope="scope">
                    {{scope.row.goodsModel.level}}
                </template>
            </el-table-column>
            <el-table-column label="物品类型" prop="typeStr" width="100">
                <template slot-scope="scope">
                    {{scope.row.goodsModel.typeStr}}
                </template>
            </el-table-column>
            <el-table-column label="品质" prop="pinzhi" width="100">
                <template slot-scope="scope">
                    {{scope.row.goodsModel.pinzhi}}
                </template>
            </el-table-column>
            <el-table-column label="强化等级" prop="strong" width="100">
               <template slot-scope="scope">
                    {{scope.row.boothModel.strong}}
                </template>
            </el-table-column>
            <el-table-column label="售卖单价" prop="money" width="110">
                <template slot-scope="scope">
                    <strong class="color_danger">{{scope.row.boothModel.money}}</strong>
                    {{scope.row.boothModel.priceType=='1'?'金币':scope.row.boothModel.priceType=='2'?'炼器符':scope.row.boothModel.priceType=='3'?'RMB':''}}
                </template>
            </el-table-column>
            <el-table-column label="购买数量" prop="oNumber" width="100"></el-table-column>
            <el-table-column label="备注" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                    {{scope.row.boothModel.remake}}
                </template>
            </el-table-column>
            <el-table-column label="买家" prop="sellName" width="150" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                     <div v-if="scope.row.buyModel">
                        <span class="color_blue">{{scope.row.buyModel.gameName}}</span> 
                        <el-tooltip class="item" effect="dark" v-if="token" :content="scope.row.buyModel.qq" placement="top">
                              <i class="el-icon-warning-outline"></i>
                        </el-tooltip>
                     </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="order_status" width="150">
                <template slot-scope="scope">
                    <div class="color_warning" v-if="scope.row.order_status=='0'">待发货</div>
                    <div class="color_danger" v-if="scope.row.order_status=='-1'">交易关闭</div>
                    <div class="color_success" v-if="scope.row.order_status=='1'">交易完成</div>
                    <div class="color_blue" v-if="scope.row.order_status=='2'">已发货</div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="160">
                <template slot-scope="scope">
                    {{scope.row.createTime}}
                </template>
            </el-table-column>
            <el-table-column label="交易截止时间" prop="close_time" width="160">
                <template slot-scope="scope">
                    {{scope.row.close_time}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                     <el-button type="warning" size="mini" v-if="scope.row.order_status=='0'" @click="clickUpdateOrder(scope.row,'-2')">已发货</el-button>
                </template>
            </el-table-column>
      </el-table>

      <pagination
        :total="total"
        :current-page="pageindex"
        :display="pagesize"
        @pagechange="pagechange"
        ></pagination>
   </div>
</template>

<script>
import { get } from '@/common/app.js'
import pagination from "@/components/common/pagination.vue";
import { formatDate } from '@/common/unit.js'
export default {
   components: { pagination },
   data() {
      return {
         token: this.$store.state.token,

         list: [],
         goodsName: "",
         pageindex: 1,
         pagesize: 20,
         total: 0,
      }
   },
   mounted() {
      this.getData()
   },
   methods: {
      clickUpdateOrder(row,status){
         this.$confirm(`确定" ${row.goodsModel.name} "已发货？`, "提示").then(() => {
              let params = {
                  type: 'getOrder',
                  api: 'api-order-update',
                  data: {
                     _id: row._id,
                     order_status: status,
                  }
              }
              get('game', params).then(res => {
               if (res) {
                  this.$message.success("已发货！")
                  this.getData()
               }
            })
         }).catch(() => {
               this.$message({
                  type: 'info',
                  message: '已取消操作'
               });          
         });
      },
      getData() {
         if(this.token){
            let params = {
               type: 'getOrder',
               api: 'api-order-list-sell',
               token: this.token,
               data: {
                  goodsName: this.goodsName,
                  pageIndex: this.pageindex,
                  pageSize: this.pagesize,
               },
            }
            get('game', params).then(res => {
               if (res) {
                  // console.log("卖家")
                  
                  if(res.list&&res.list.length>0){
                     res.list.forEach(item=>{
                        item.goodsModel = item.goodsList?item.goodsList[0]:{}
                        item.buyModel = item.buyList?item.buyList[0]:{}
                        item.boothModel = item.boothList?item.boothList[0]:{}
                        item.createTime = formatDate(new Date(item.createTime),'yyyy-MM-dd hh:mm:ss')
                        item.close_time = formatDate(new Date(item.close_time),'yyyy-MM-dd hh:mm:ss')
                     })
                     this.list = res.list
                     console.log(this.list)
                     this.total = res.total
                  }
               }
            })
      }
      },
      pagechange: function(currentPage) {
         this.pageindex = currentPage;
         this.getData();
      },
   },
}
</script>

<style scoped>

</style>